import React, { useEffect, useState } from 'react'
import http from '../../api/http'
import { NavBar, Button, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { InfiniteScroll } from 'antd-mobile'
import styles from './home.module.css'

function Index() {
  const navigate = useNavigate()

  const [list, setList] = useState([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)

  // 获取列表
  const fetchList = async () => {
    const res = await http.get('/api/trip/airplane', { params: { start: '北京', end: '三亚', page } });

    setList((pre) => [...pre, ...res.data.data])
    setPage(page + 1)
    if (res.data.data.length === 0) {
      setHasMore(false)
    }
  }
  // 回调
  useEffect(() => {
    fetchList()
  }, [])
  return (
    <div>
      <NavBar onBack={() => { navigate(-1) }}>车次列表</NavBar>
      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
        <Button size='small' color='success'>
          前一天
        </Button>
        <Button size='small' color='warning'>
          2025-06-17
        </Button>
        <Button size='small' color='success'>
          后一天
        </Button>
      </div>
      {/* 列表大盒子 */}
      <div>
        {
          list && list.map((item, ind) => {
            return <div key={ind} className={styles.box} onClick={() => navigate(`/detail`, { state: item })}>
              {/* 上 */}
              <div className={styles.top}>
                {/* 左边 */}
                <div className={styles.left}>
                  {/* 1 */}
                  <div>
                    <p>{item.dst}</p>
                    <p>{item.dasn}</p>
                    <p>{item.dat}</p>
                  </div>
                  {/* ---- */}
                  <div>-----→</div>
                  {/* 2 */}
                  <div>
                    <p>{item.ast}</p>
                    <p>{item.aasn}</p>
                    <p>{item.aat}</p>
                  </div>
                </div>
                {/* 右边 */}
                <div className={styles.right}>￥{item.lps[0].atp}</div>
              </div>
              {/* 下 */}
              <div className={styles.foot}>
                <span>{item.ss[0].asn}</span> || {''}
                <span>{item.ss[0].amn}</span>
              </div>
              <p style={{ display: 'flex', justifyContent: 'space-around' }}>
                <span>二等座 有票</span>
                <span>一等座 有票</span>
                <span>特等座 18票</span>
              </p>
            </div>
          })
        }
      </div>
      <InfiniteScroll loadMore={fetchList} hasMore={hasMore} />
    </div>
  )
}

export default Index
